import Description from '@/components/Description';
import { realTimeMonitoringControllerStationBasicInfo as getInfo } from '@/services/ess/realTimeMonitoring';
import { useIntl } from '@umijs/max';
import React, { useEffect, useState } from 'react';

export const StationBasicInfo: React.FC = () => {
  const intl = useIntl();
  const [items, setItems] = useState<
    Array<{
      key: keyof API.StationBasicInfoDTO;
      label: string;
      children: React.ReactNode;
      span?: number;
    }>
  >([
    {
      key: 'name',
      label: intl.formatMessage({ id: 'baseInfo.name' }), // 站点名称
      children: '',
    },
    {
      key: 'operationTime',
      label: intl.formatMessage({ id: 'baseInfo.operationTime' }), // 投运时间
      children: '',
    },
    {
      key: 'ratedCapacity',
      label: intl.formatMessage({ id: 'baseInfo.ratedCapacity' }), // 额定容量
      children: '',
    },
    {
      key: 'ratedPower',
      label: intl.formatMessage({ id: 'baseInfo.ratedPower' }), // 额定功率
      children: '',
    },
    {
      key: 'address',
      label: intl.formatMessage({ id: 'baseInfo.address' }), // 地址
      children: '',
    },
    {
      key: 'areaCount',
      label: intl.formatMessage({ id: 'baseInfo.number' }), // 分区数量
      children: '',
      span: 1,
    },
  ]);

  useEffect(() => {
    // 调用后端接口获取数据
    getInfo({}).then((response) => {
      if (response.success && response.data) {
        const data: API.StationBasicInfoDTO = response.data;
        // 更新items状态
        setItems((prevItems) =>
          prevItems
            .map((item) => {
              let children = data[item.key];
              // @ts-ignore
              if (item.key === 'ratedCapacity' && data.capacityUnit) {
                // @ts-ignore
                children = `${children} ${data.capacityUnit}`;
              }
              // @ts-ignore
              if (item.key === 'ratedPower' && data.ratedPowerUnit) {
                // @ts-ignore
                children = `${children} ${data.ratedPowerUnit}`;
              }
              return {
                ...item,
                children: children !== undefined ? children : item.children,
              };
            })
            .filter((item) => item.key !== 'areaCount' || item.children !== null),
        );
      }
    });
  }, []);

  return (
    <Description
      items={items}
      column={3}
      labelStyle={{ width: '150px' }}
      style={{ padding: '40px 80px 0 0' }}
    />
  );
};
